<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1">
	<title>(っ °Д °;)っ</title>
	<link rel="stylesheet" href="/utils/style.css">
	<script async src="/utils/stat.js"></script>
	<script defer src="/utils/main.js"></script>
	<style>
		#stage {
			background-color: #000;
			width: 80vmin;
			max-width: 500px;
			height: 80vmin;
			max-height: 500px;
		}

		.config-table,
		td {
			font: 1em sans-serif;
			margin: auto;
			border: 1px solid #888;
		}
	</style>
</head>

<body>
	<div class="main">
		<h1 class="title"></h1>
		<p class="info"></p>
		<p class="profile">
			操作说明：电脑鼠标左击放大，右击缩小；手机点击放大，长按缩小。<br>
		</p>
		<canvas id="stage"></canvas>
		<table class="config-table">
			<tr>
				<td class="item-left">x坐标</td>
				<td class="item-right"><span id="x">0</span></td>
			</tr>
			<tr>
				<td class="item-left">y坐标</td>
				<td class="item-right"><span id="y">0</span></td>
			</tr>
			<tr>
				<td class="item-left">放大倍数</td>
				<td class="item-right"><span id="px">0</span></td>
			</tr>
			<tr>
				<td class="item-left">迭代次数</td>
				<td class="item-right"><span id="ts">0</span></td>
			</tr>
			<tr>
				<td class="item-left">颜色</td>
				<td class="item-right">
					<select id="note" onchange="init('a','a','a','a',this.value)">
						<option value="[51,0,102]" selected>RGB</option>
						<option value="[51,102,0]">RBG</option>
						<option value="[102,51,0]">GBR</option>
						<option value="[0,51,102]">GRB</option>
						<option value="[0,102,51]">BRG</option>
						<option value="[102,0,51]">BGR</option>
						<option value="[0,0,0]">Gray</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="item-left">下载图片</td>
				<td class="item-right"><button id="download">点击下载</button></td>
			</tr>
		</table>
	</div>
	<noscript><strong style="color:#f00">此浏览器不支持JavaScript，该脚本无法运行。</strong></noscript>
	<script src="./script.js"></script>
</body>

</html>